<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        const mutationObserver = new MutationObserver(() => {
            console.log('dom was mutation')
        })
       
        // 创建一个observer并配置他的body元素上属性的变化
        // 这里面的回调函数接收一个MutattionReccord数组，数组里包含发生了什么变化
        // 回调函数的第二个参数是观察变化的MuatationObserver实例
        const observer = new MutationObserver( (mutattionreccord, mutationobserver) => {
            console.log(mutattionreccord, mutationobserver)
        })

        observer.observe(document.body, {attributes: true})

        document.body.setAttribute('className', 'bodyName')  
        document.body.setAttribute('className', 'bodyName')
        document.body.setAttribute('className', 'bodyName')
        // (3) [MutationRecord, MutationRecord, MutationRecord]
        // 以上执行了三遍更改属性最后只输出最后的mutationrecord数组


    </script>
</body>
</html>